<!DOCTYPE html>
<html>
<head>
    <title>{{ class_id }}班学生管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-top: 30px;
        }
        h2 {
            color: #3b5bdb;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 15px;
            margin-bottom: 25px;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
            color: #3b5bdb;
        }
        .btn-primary {
            background-color: #3b5bdb;
            border-color: #3b5bdb;
            padding: 8px 20px;
            font-weight: 500;
        }
        .btn-primary:hover {
            background-color: #2d4cdb;
            border-color: #2d4cdb;
        }
        .btn-warning {
            background-color: #ffbe33;
            border-color: #ffbe33;
            padding: 6px 12px;
            font-size: 0.875rem;
        }
        .btn-danger {
            background-color: #f5222d;
            border-color: #f5222d;
            padding: 6px 12px;
            font-size: 0.875rem;
        }
        .btn-group {
            white-space: nowrap;
        }
        .table th {
            background-color: #f0f2ff;
            color: #3b5bdb;
            font-weight: 600;
        }
        .table-hover tbody tr:hover {
            background-color: #f8f9ff;
        }
        .form-control:focus {
            border-color: #3b5bdb;
            box-shadow: 0 0 0 0.25rem rgba(59, 91, 219, 0.25);
        }
        .student-card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            border: 1px solid #eee;
        }
        .student-card:hover {
            border-color: #3b5bdb;
            background-color: #f8f9ff;
        }
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        .edit-form {
            position: relative;
        }
        .edit-input {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 5px 10px;
            width: 100%;
        }
        .edit-input:focus {
            border-color: #3b5bdb;
            outline: none;
        }
        .edit-input-save {
            position: absolute;
            right: -30px;
            top: -30px;
            padding: 3px 8px;
            font-size: 0.8rem;
        }
        .edit-input-save:hover {
            background-color: #3b5bdb;
            color: white;
        }
    </style>
</head>
<body>
<div class="container mt-4">
    <h2>{{ class_id }}班学生管理</h2>
    
    <!-- 添加学生表单 -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>添加学生</span>
        </div>
        <div class="card-body">
            <form method="post" class="mb-4">
                {% csrf_token %}
                <div class="input-group">
                    <input type="text" name="new_name" placeholder="输入学生姓名" required class="form-control">
                    <button type="submit" name="add_student" class="btn btn-primary">添加学生</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 学生列表 -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>学生列表</span>
            <span class="badge bg-secondary">{{ students|length }}</span>
        </div>
        <div class="card-body">
            {% if students %}
            {% for student in students %}
            <div class="student-card">
                <form method="post" class="edit-form d-inline">
                    {% csrf_token %}
                    <input type="hidden" name="old_name" value="{{ student }}">
                    <input type="text" name="new_name" value="{{ student }}" class="edit-input me-2" placeholder="点击编辑">
                    <button type="submit" name="edit_student" class="btn btn-warning btn-sm edit-input-save">保存</button>
                </form>
                <div class="action-buttons">
                    <form method="post" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="delete_student" value="{{ student }}">
                        <button type="submit" class="btn btn-danger btn-sm">删除</button>
                    </form>
                </div>
            </div>
            {% endfor %}
            {% else %}
            <div class="alert alert-info">暂无学生，请添加学生</div>
            {% endif %}
        </div>
    </div>
</div>
</body>
</html>
